<template>
    <div class="formatted-content">
      <!-- <div class="pre-content" v-html="preprocessedContent"></div> -->
      <markdown-renderer :content="processedContent" :download="true"></markdown-renderer>
      <div v-for="(code, index) in codeBlocks" 
           :key="'code-'+index"
           class="code-block">
        <div class="code-header">
          <span class="lang-tag">{{ code.language }}</span>
          <el-button 
            size="mini" 
            v-if="code.language === 'html'"
            @click="executeCode(code.content)"
            class="execute-btn">
            <i class="el-icon-check"></i>
          </el-button>
          <el-button 
            size="mini" 
            @click="copyCode(code.content)"
            class="copy-btn">
            <i class="el-icon-document-copy"></i>
          </el-button>
        </div>
        <pre><code :class="'language-' + code.language" v-if="code.language !== 'html'">{{ code.content }}</code></pre>
        <div v-if="code.language === 'html'" class="preview-container">
          <iframe 
            :srcdoc="code.content"
            sandbox="allow-scripts allow-forms allow-same-origin"
            class="preview-iframe"
          ></iframe>
        </div>
      </div>
      
      <execute-dialog ref="exeDialog" :key="dialogKey" :options="executeOptions"></execute-dialog>
    </div>
  </template>
  
  <script lang="ts">
  import { Component, Prop, Vue, Watch,Ref } from 'vue-property-decorator';
  import hljs from 'highlight.js';
  import 'highlight.js/styles/github.css';

  import ExecuteDialog from '@/components/ExecuteDialog.vue';
  import MarkdownRenderer from '@/components/MarkdownRenderer.vue';
  @Component({
  components: { ExecuteDialog,MarkdownRenderer }
  })
  export default class FormattedContent extends Vue {
    @Prop({ required: true }) content!: string;
    @Ref("exeDialog") exeDialog;
    dialogKey:any='';
  
    codeBlocks: Array<{ language: string; content: string }> = [];
    executeOptions:any ={
        dialogVisible:false,
        dynamicHtml:''

    };

    get preprocessedContent() {
    return this.content
      .replace(/\n/g, '<br>') // 转换普通换行符
      .replace(/(^|\s) {2}/g, ' &nbsp;'); // 保留连续空格
  }

  
    get processedContent() {
      // Markdown基础处理
      let markdown = this.content
        .replace(/```(\w+)\n([\s\S]*?)```/g, (_, lang, code) => {

          const contents = this.codeBlocks.map(c => c.content);
          if(contents.includes(code.trim())){
            return '';
          }

          this.codeBlocks.push({ language: lang, content: code.trim() });
          return '<div class="code-placeholder"></div>';
        })
        .replace(/`([^`]+)`/g, `$1`);
        return markdown
      .replace(/([^\n])\n([^\n])/g, '$1  \n$2') // 转换单换行为Markdown换行
      .replace(/\n{3,}/g, '\n\n'); // 合并多个空行
    }
  
    copyCode(content: string) {
      navigator.clipboard.writeText(content);
      this.$message.success('代码已复制');
    }

    executeCode(content: string){
      this.dialogKey = content;
       this.executeOptions.dynamicHtml = content;
       this.executeOptions.dialogVisible = true;
      //  this.exeDialog.loadIframeContent();
    }
  
    @Watch('codeBlocks')
    highlightCode() {
      this.$nextTick(() => {
        document.querySelectorAll('pre code').forEach(block => {
          hljs.highlightElement(block as HTMLElement);
        });
      });
    }
  }
  </script>
  
  <style scoped lang="scss">

.pre-content {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.6;
    
    /* 保留代码块之前的空行 */
    br {
      content: '';
      display: block;
      margin-bottom: 0.5em;
    }
  }
  .formatted-content {
    line-height: 1.6;
  
    .code-block {
      position: relative;
      margin: 1rem 0;
      border-radius: 6px;
      overflow: hidden;
  
      .code-header {
        background: #f6f8fa;
        padding: 8px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
  
        .lang-tag {
          color: #666;
          font-size: 0.8em;
        }
  
        .copy-btn {
          padding: 4px 8px;
        }
      }
  
      pre {
        margin: 0;
        code {
          padding: 1rem !important;
        }
      }
    }
  
    .inline-code {
      background: #f3f4f6;
      padding: 2px 4px;
      border-radius: 3px;
      color: #e83e8c;
    }
  }
  .preview-container {
  margin-top: 10px;
  border: 1px solid #ebedf0;
  border-radius: 4px;
  overflow: hidden;
  
  .preview-iframe {
    width: 100%;
    height: 200px;
    border: 0;
    background: white;
  }
}

  </style>